<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>jQuery分页插件</title>
    <link rel="stylesheet" href="css/index.css">

</head>

<body>
	
    <div id="container" data-PageSwitch>
        <div class="sections" id="slider">
            <div class="section" id="section0">
                <div class="content">
                	
                </div>
              	<div class="title"></div>
            </div>
            <div class="section" id="section1">
                <h3>This is the Page</h3>
            </div>
            <div class="section" id="section2">
                <h3>This is the Page</h3>
            </div>
            <div class="section" id="section3">
                <h3>This is the Page</h3>
            </div>
            <div class="footer"></div>
        </div>
        
    </div>

    <script src="js/jquery.js"></script>
    <script src="js/page.js"></script>
    <script>
    	$(function(){
    		var show =['About me','My Skill','Experience','Concat me']
    		
//  		for(var i=0;i<lis.length;i++){
//  			var sHtml = show[i]
//  			lis[i].innerText(sHtml)
//  		}
    		$('li').each(function(index,item){
//  			item.innerHTML = show[index]
    			$(item).html(show[index])
    		})
    		
    		//为。img的div添加内容
    		var str = `<div class="back"></div>
        				<h3>name</h3>
        				<p>求职:前端工程师</p>`
    		$('div.img').html(str)
    		
    		//添加个人图标
    		var myStr = `<a href=""><img src="./image/github.jpg" alt="" /></a>
					     <a href=""><img src="./image/blog.jpg" alt="" /></a>
					     <a href=""><img src="" alt="" /></a>`
					     
			$('div.icon').html(myStr)		     
					     
    	})
     	
     	//定义触摸事件
		function load (){  
  
        	/*单指拖动*/  
		    var obj = document.getElementById("slider")
		    var x, y;
		    function move(event) {  
		            // 如果这个元素的位置内只有一个手指的话  
		  
	            if (event.targetTouches.length == 1) {　　　　  
	                event.preventDefault(); // 阻止浏览器默认事件，重要   
	                var touch = event.targetTouches[0];  
	                // 把元素放在手指所在的位置  
	  
	                obj.style.left = touch.pageX - x + 'px';  
	                // obj.style.top = touch.pageY + 'px';  
	            }  
		    }
		    function start(event) {  
		        var touch = event.targetTouches[0];  
		        var left = parseInt(obj.style.left);  
		        // alert(left);  
		        x = touch.pageX - left;  
		        y = touch.pageY - left; 
		        obj.addEventListener('touchmove', move, false);
		    }
		    
		    obj.addEventListener("touchstart", start)
		           
		    obj.addEventListener("touchend",function(){ 
		    	obj.removeEventListener("touchmove",move)  
		        obj.removeEventListener("touchstart",start)  
		        
		    });     
		}  
		window.addEventListener('load',load, false); 

    </script>
</body>

</html>